<template>
  <div>
    <nav-top class="navTop"
             Licon="back"
             title="激活支付详情"
             @callback="goBack" />
    <div class="detail">
      <div class="detailContent">
        <div class="item flex "
             v-for="(item, i) in list"
             :key="i">
          <div class="label">{{ item.label }}</div>
          <div class="value wspl">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'SerialOneDetail',
  data() {
    return {
      list: [
        // { label: "序列号：", value: "1095700" },
        // { label: "所属批次：", value: "辛集市建华中学" },
        // { label: "价格：", value: "¥468.00" },
        // { label: "激活状态：", value: "已激活" },
        // { label: "激活时间：", value: "2019-10-18 18:00:57" },
        // { label: "支付时间：", value: "暂未支付" },
        // { label: "激活用户：", value: "13478848745\nfn39773835" },
        // { label: "学校班级：", value: "幸集建华中学\n七年级73班" }
      ]
    }
  },
  computed: {
    ...mapGetters(['serialDetail', 'vipDetail', 'proxy_id'])
  },
  created() {
    // console.log(this.$route.params.serial);
    this.searchSerial()
  },
  methods: {
    // 返回
    goBack(val) {
      if (val == 'back') {
        this.$router.go(-1)
      }
    },
    // 搜索序列号
    searchSerial() {
      let params = {
        proxy_id: this.proxy_id,
        search: this.$route.params.serial,
        type: 1
      }

      this.Http.searchSerial(params)
        .then(res => {
          // console.log(res);
          this.serialList = res.info
          this.list = [
            { label: '序列号：', value: res.info.serial },
            {
              label: '所属批次：',
              value: res.info.oname ? res.info.oname : '无'
            },
            {
              label: '会员内容',
              value: res.info.pname ? res.info.pname : '无'
            },
            {
              label: '价格：',
              value:
                '¥' + res.info.present_price ? res.info.present_price : '0.00'
            },
            {
              label: '激活状态：',
              value: res.info.status == 2 ? '已支付' : '已激活'
            },
            {
              label: '激活时间：',
              value: res.info.activation_time ? res.info.activation_time : '无'
            },
            {
              label: '支付时间：',
              value: res.info.update_time ? res.info.update_time : '暂未支付'
            },
            {
              label: '激活用户：',
              value:
                (res.info.username ? res.info.username : '无') +
                '\n' +
                res.info.phone
            },
            {
              label: '姓名：',
              value: res.info.realname ? res.info.realname : '无'
            },
            {
              label: '学校班级：',
              value: res.info.school_name ? res.info.school_name : '无'
            }
          ]
        })
        .catch(err => {
          console.log(err)
          this.$toast({
            message: err.msg,
            duration: 1500
          })
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        })
    }
  }
}
</script>

<style scoped lang="less">
.detail {
  background-color: #fff;
  color: #999;
}
.detailContent {
  padding: 20px 58px;
  font-size: 36px;
  line-height: 2;
}
.label {
  width: 220px;
}
.value {
  color: #222;
  width: 500px;
}
</style>
